<template>
  <div class="menu">
    <div class="menu-content">
      <!-- 登录信息 -->
      <div
        class="header"
        v-if="!user"
        :style="{
          background: `url(${require('../../assets/img/menu-bg.jpg')}) 0 0 / cover`,
        }"
      >
        <div class="msg">鑫哥出品,必属精品!</div>
        <div class="login-btn" @click="loginClick">立即登录</div>
      </div>
      <div
        v-else
        class="header"
        :style="{ background: `url(${user.backgroundUrl}) 0 0 / 100%` }"
      >
        <div class="avatar">
          <img :src="user.avatarUrl" alt="" />
        </div>
        <div class="name">{{ user.nickname }}</div>
      </div>
      <!-- 选项 -->
      <ul class="menu-list">
        <li><i class="iconfont icon-pinglun"></i><span>我的消息 (未完善)</span></li>
        <li><i class="iconfont icon-huiyuan"></i><span>会员中心 (未完善)</span></li>
        <li><i class="iconfont icon-zuijinbofang"></i><span>历史歌单 (未完善)</span></li>
        <li @click="likeClick">
          <i class="iconfont icon-xihuan2"></i><span>我喜欢的音乐</span>
        </li>
      </ul>
      <!-- 坑位 -->
      <ul class="other">
        <li>其他功能待开发</li>
      </ul>
      <ul class="star">
        <li>觉得还不错点个star吧</li>
        <a href="https://github.com/xiaoaaaauguf" target="_blank">
          <img
            src="https://img.shields.io/github/stars/xiaoaaaauguf/flqin.svg?style=social"
            alt="github"
          />
        </a>
      </ul>
      <!-- 底部设置 -->
      <ul class="footer">
        <li @click="bgClick">
          <i class="iconfont icon-yejian"></i><span>夜间模式</span>
        </li>
        <li><i class="iconfont icon-shezhi"></i><span>设置</span></li>
        <li v-if="user" @click="logoutClick"><i class="iconfont icon-tuichu"></i><span>退出登录</span></li>
      </ul>

      <!-- 喜欢音乐列表 -->
      <transition
         name="van-slide-down"
      >
        <div class="like" v-show="showLike">
          <header>
            <i class="iconfont icon-fanhui" @click="showLike = false"></i>
            <span>我喜欢的音乐</span>
          </header>
          <div v-if="likeSong">
            <music-list :data="likeSong" :count="0" />
          </div>
          <div v-else style='color:#f40;'>
            没有喜欢的歌曲或未登录
          </div>
        </div>
      </transition>
    </div>
    <div class="cover" @click="back"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getPlayRecord } from "@/network/api";
import MusicList from "../common/music-list.vue";
export default {
  components: { MusicList },
  data() {
    return {
      showLike: false,
    };
  },
  async created() {
    
  },
  computed: {
    ...mapState({
      user: (state) => state.user.userInfo,
      likeSong: (state) => state.user.likeSong,
    }),
  },
  methods: {
    back() {
      this.$emit("input", false);
    },
    loginClick() {
      this.back();
      this.$emit("goLogin");
    },
    async bgClick() {
      console.log(111);
      getPlayRecord(this.user.userId);
    },
    likeClick() {
      this.showLike = true;
    },
    // 退出登录
    logoutClick(){
      localStorage.removeItem('cookie')
      this.bus.$emit('upLog')
    }
  },
};
</script>
 
<style lang = "scss" scoped>
@import "@/assets/global-style.scss";
.menu {
  position: fixed;
  width: 100%;
  z-index: 10009;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  .menu-content {
    position: relative;
    width: 84%;
    background: #f2f4f5;

    /* 头部信息 */
    .header {
      height: 150px;
      background-size: cover;
      overflow: hidden;
      font-size: 16px;
      color: $font-color-light;
      text-align: center;
      img {
        width: 100%;
      }
      .msg {
        margin-top: 60px;
      }
      .login-btn {
        position: absolute;
        left: 50%;
        top: 100px;
        transform: translateX(-50%);
        padding: 5px 40px;
        border-radius: 15px;
        border: 1px solid $border-color;
      }
      .avatar {
        img {
          width: 55px;
          height: 55px;
          border-radius: 50%;
          margin: 20px 0;
        }
      }
    }
    /*  */
    .menu-list {
      background: #fff;
      li {
        height: 40px;
        line-height: 40px;
        display: flex;
        align-items: center;
        i {
          font-size: 20px;
          margin: 0 10px;
        }
        span {
          color: #333;
        }
      }
    }
    .footer {
      height: 44px;
      line-height: 44px;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
      background: #fff;
      font-weight: 500;
      li {
        display: flex;
        align-items: center;
        span {
          margin-left: 5px;
        }
      }
      li:nth-child(3) {
        margin-right: 20px;
      }
    }
    /* 其他功能 */
    .other {
      margin-top: 10px;
      background: #fff;
      text-align: center;
      height: 88px;
      line-height: 88px;
      color: #f40;
    }
    .star {
      color: #f40;
      margin-top: 10px;
      background: #fff;
      text-align: center;
      height: 88px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
  }
  /* 遮罩 */
  .cover {
    flex: 1;
    background: transparent;
  }
}
.like {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding-top: 40px;
  background: #fff;
  height: 100%;
  overflow: auto;
  .back {
    height: 30px;
    display: flex;
    align-items: center;
    i {
      margin-left: 10px;
      font-size: 20px;
    }
  }
  //头部
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;

    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 5px;
    color: #666;
    width: 81%;
    i {
      font-size: 20px;
    }
    span {
      margin-left: 5px;
      font-size: 16px;
    }
  }
}
</style>
